@import "../vars";

$navbar-height: 4rem;
$spacing-size: 1rem;
$side-width: 17rem;
* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	background: #f8f8f8;
	color: #555;
	word-break: break-all;
	line-height: 1.4;
}

body {
	padding-top: $navbar-height;
}

a {
	color: #2f2f2f;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

.scroll {
	$size: 50px;
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	height: $size;
	width: $size;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.47);
	border-radius: 50%;
	z-index: 3;
	background: white;
	overflow: hidden;
	display: none;
	cursor: pointer;

	canvas, span {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		text-align: center;
		line-height: $size;
	}
}

.container {
	position: relative;
	margin: auto;
	padding: 0;
	width: 70%;
}

.clearfix {
	&:after {
		content: ' ';
		height: 0;
		zoom: 1;
		display: block;
		clear: both;
	}
}

.navbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	font-size: 1rem;
	font-family: -apple-system, 'Microsoft YaHei', 'Songti TC', serif;
	height: $navbar-height;
	line-height: $navbar-height;
	z-index: 3;
	transition: all .35s ease;

	&.shadow {
		box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.67);
	}

	&-brand {
		font-size: 1.5rem;
	}

	&-item {
		display: inline-block;
		height: $navbar-height;
		line-height: $navbar-height;
		padding: 0 .1rem;
	}

	&-container {
		display: inline-block;
		z-index: 3;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	#toggleSideNav {
		$spacing: 9px;
		$line-width: 3px;
		$width: 1.5rem;
		position: fixed;
		display: none;
		background: none;
		border: none;
		right: 1rem;
		top: 1.5rem;
		height: $line-width;
		width: $width;
		background: black;
		z-index: 10;

		&:focus {
			outline: none;
		}

		&:before, &:after {
			content: ' ';
			position: absolute;
			background: black;
			transition: all .35s;
			height: $line-width;
			width: 100%;
			left: 0;
		}

		&:before {
			top: -$spacing;
		}

		&:after {
			bottom: -$spacing;
		}

		&.active {

		}
	}
}

.main {
	float: left;
	width: 100%;
	padding: $spacing-size $side-width + $spacing-size / 2 $spacing-size $spacing-size;
	z-index: 1;
}

.aside {
	&-container {
		position: absolute;
		right: 0;
		top: 0;
		padding: $spacing-size $spacing-size / 2;
		width: $side-width;
		z-index: 2;
	}

	width: $side-width;
}

.block {
	position: relative;
	margin-right: .5rem;
	box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);
	padding: 2rem;
	box-sizing: border-box;
	background: #fff;
	margin-bottom: 1rem;
	width: auto;
	border-radius: .2rem;
}

.markdown-editor {
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
	border-radius: .5rem;
	overflow: hidden;
}

.article {
	&-list {
		&-item {
			position: relative;
			overflow: hidden;
			transition: all .35s;

			&:hover {
				box-shadow: 0 0 .6rem #919191;
			}

			a {
				color: #2d2926;
				text-decoration: none;
			}

			.title {
				margin: 0;
				word-break: break-all;
			}

			.info {
				margin: 0;
				font-size: .8rem;
				color: #7b7b7b;

				a {
					color: inherit;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.mark {
				$color: #b2b2b2;
				color: $color;
				font-size: .9rem;
				border: thin solid $color;
				padding: .2rem;
				text-align: center;
				font-style: normal;
				border-radius: .2rem;
				font-weight: normal;
			}
		}
	}

	img {
		max-width: 100%;
	}

	.info {
		margin: .3rem 0;
		font-size: .9rem;
		color: #6f6f6f;

		a {
			color: inherit;
		}
	}

	h1 {
		font-size: 1.8rem;
	}

	//h2 {
	//  font-size: 1.7rem;
	//}
	//h3 {
	//  font-size: 1.6rem;
	//}
	//h4 {
	//  font-size: 1.6rem;
	//}
	//h5 {
	//  font-size: 1.5em;
	//}
	//h6 {
	//  font-size: 1.4rem;
	//}
}

.panel {
	border: thin solid #f2f2f2;
	background: white;
	border-radius: .3rem;
	overflow: hidden;
	box-shadow: 0 0 0.4rem #efefef;

	&-header, &-content {
		box-sizing: border-box;
	}

	&-header {
		background: #fafafa;
		padding: .6rem .9rem;
	}

	&-btn-toggle {
		cursor: pointer;

		i {
			transition: all .4s;
		}
	}

	&-content {
		padding: .8rem;
		line-height: 1.4;

		p, h1, h2, h3, h4, h5, h6 {
			margin: 0;
		}
	}

	&[data-open=false] {
		.panel-btn-toggle {
			i {
				transform: rotate(-90deg);
			}
		}
	}

	& + .panel {
		margin-top: 1rem;
	}
}

.footer {
	color: #d1d1d1;
	background: #2d2926;
	margin-top: 4rem;
	padding: 1rem;
	text-align: center;

	a {
		color: inherit;
	}
}

.search {
	&-container {
		position: relative;

		input {
			margin: 0;
			box-sizing: border-box;
			padding-right: 2rem;

			&:focus + .hui-icon {
				opacity: 1;
			}
		}

		.hui-icon {
			position: absolute;
			opacity: .6;
			right: 0;
			top: 0;
			margin: .5rem;
			transition: opacity .35s;
		}
	}

	&-mobile {
		display: none;
	}

	&-hot {
		padding: .5rem 0;
		box-sizing: border-box;
	}
}

.tag-link {
	line-height: 1.5;
	background: #f1f1f1;
	padding: .2rem .4rem;
	border-radius: .2rem;
	margin: .2rem;
	display: inline-block;
	transition: all .35s;

	&:hover {
		background-color: #00a4ff;
		color: white;
	}
}

.qrcode {
	display: none;
	padding-bottom: .5rem;
}

.markdown-body {
	.linenums {
		li {
			list-style-type: decimal !important;
		}
	}

	ol, ul {
		margin-bottom: 0 !important;
	}
}

.appreciate {
	.hui-btn {
		$color: #1c87ff;
		background: none;
		border: thin solid $color;
		color: $color;
		transition: background-color .35s, color .35s;
		padding: .5rem 2rem;

		&:hover, &.active {
			color: white;
			background-color: $color;
			text-decoration: none;
		}

		& + .hui-btn {
			margin-left: 2rem;
		}
	}

	&-container {

	}

	&-img {
		height: 14rem;
		width: 14rem;
		margin: 2rem;
		border-radius: .2rem;
		border: thin solid gray;

		&.alipay {
			display: none;
		}
	}

	&-box {
		padding: 1.5rem;
		display: none;
		width: 90%;
		max-width: 35rem;
		z-index: 4;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 1rem black;
		background-color: white;
		overflow: hidden;
		border-radius: .2rem;

		button {
			margin-top: 1rem;
			background-color: transparent;
			border: thin solid;
		}

		.hui-btn-primary {
			color: #007bff;
			border-color: #007bff;

			&:hover, &.active {
				background-color: #007bff;
				color: white;
			}
		}

		.hui-btn-success {
			color: #28a745;
			border-color: #28a745;

			&:hover, &.active {
				background-color: #28a745;
				color: white;
			}
		}
	}
}
